<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面 </title>
<!--Bootstrap Stylesheet [ REQUIRED ]-->
<link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="plugins/bootstrap/css/bootstrap-theme.min.css"
	rel="stylesheet">
<link href="plugins/animate-css/animate.min.css" rel="stylesheet">
<link href="plugins/font-awesome/css/font-awesome.min.css"
	rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> 

</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-sm-4 col-sm-offset-8" style="margin-top: 100px;padding-right:0;">
				<form class="form-horizontal" id="loginForm">
						<div class="" id="upTab">
							<div class="form-group">
								<!-- 记住,input框的name值，要与cookie.js中的key值相同 -->
								<input type="text" class="form-control" id="userName"
									placeholder="用户名" name="userName"> <i class="fa fa-user"></i>
							</div>
							<div class="form-group help">
								<input type="password" class="form-control" id="userPW"
									placeholder="密　码" name="userPW"> <i class="fa fa-lock"></i>
							</div>
							<div class="form-group">
								<div class="main-checkbox1">
									<input type="checkbox" value="None" id="remember" name="check"
										checked="checked" />
								</div>
								<label class="text" for="remember">记住我</label>
								<button type="button" class="btn btn-default" id="login">登录</button>
							</div>
						</div>
				</form>
			</div>
		</div>
	</div>
	<script src="plugins/jquery/jquery-2.1.1.min.js"></script>
	<script src="plugins/jquery/jquery.cookie.js"></script>
	<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="login.js"></script>
    <script>


$(document).ready(function () {
	//如果以前选择了记住密码，则设置复选框的值，将密码和用户名取出来。 否则取消选中。
    if ($.cookie("remember") == "true") {
    	//设置前端的复选框被选中
	    $("#remember").prop("checked", true);
	    $("#userName").val($.cookie("userName"));
	    $("#userPW").val($.cookie("userPW"));
    }else{
    	$("#remember").prop("checked", false);
    }
    //单击登录按钮，执行on_click方法。
    $("#login").click(on_click);
  });
 //记住用户名密码
 function Save() {
	  //如果选择了
    if ($("#remember").prop("checked")) {
    	//取出页面上用户名和密码的值
      var str_username = $("#userName").val();
      var str_password = $("#userPW").val();
      //利用cookie.js，放置到cookie中。 将用户名，密码，是否保存，放置到cookie中.
      $.cookie("remember", "true", { expires: 1 }); //存储一个带1天期限的cookie
      $.cookie("userName", str_username, { expires: 1 });
      $.cookie("userPW", str_password, { expires: 1 });
    }
    //如果没有选择了,则取消cookie存储的值
    else {
      $.cookie("remember", "false", { expire: -1 });
      $.cookie("userName", "", { expires: -1 });
      $.cookie("userPW", "", { expires: -1 });
    }
  };
  function on_click(){
	//判断复选框的值
	Save();	
	//下面是具体的登录操作
}

    </script>
</body>
</html>
